<!-- 屈光发育档案/角塑复查(影像采集) -->
<template>
  <div class="mod-config">
    <el-divider content-position="left">影像采集</el-divider>
    <div>
      <el-form>
        <el-form-item label="影像类型" label-width="80px">
          <el-select v-model="dataForm.imageType">
            <el-option v-for="item in docTypeOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述文本" label-width="80px">
          <el-input type="textarea" v-model="dataForm.memo"></el-input>
        </el-form-item>
        <el-form-item label="上传文件" label-width="80px"></el-form-item>
      </el-form>
    </div>
    <el-upload action="/pvm/arcImage/uploadFileByOptometry" drag ref="uploadImg" list-type="picture-card" :headers="headers" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :data="{docId: dataForm.docId}">
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
      </div>
    </el-upload>
    <el-divider content-position="left">影像列表</el-divider>
    <ul class="el-upload-list el-upload-list--picture-card">
      <li v-for="imgItem in images" class="el-upload-list__item is-ready" style="border-radius: 0;">
        <div style="text-align: center;">{{imgItem.imageType}}</div>
        <div>
          <img :src="imgItem.path" alt="" class="el-upload-list__item-thumbnail" style="max-width: 150px;max-height: 300px;">
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(imgItem)">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span class="el-upload-list__item-delete" v-if="delShow" @click="handlePictureCard(imgItem)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </li>

      <li v-for="item in imgList" class="el-upload-list__item is-ready" style="border-radius: 0;">
        <div style="text-align: center;">{{item.imageType}}</div>
        <div>
          <img :src="item.path" alt="" class="el-upload-list__item-thumbnail" style="max-width: 150px;max-height: 300px;">
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span class="el-upload-list__item-delete" v-if="delShow" @click="handlePictureCard(item)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </li>
    </ul>
    <duo-image-viewer
      :currentIndex="currentIndex"
      :list="srcList"
      :show.sync="showViewer"
      @open="openCallback"
      @close="closeCallback"
    />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'
  import { filterParams } from '@/util/tools'
  import {
    delPictureByFileName,
    getArgImagelstByDocId,
    getImage,getImagesByPerson
  } from '@/api/pvm/imageCollect'

  import store from '@/store'


  export default {
    props: ['studentId','imageData'],
    data() {
      return {
        docTypeOptions: [],
        headers: {
          'Authorization': 'Bearer ' + store.getters.access_token,
        },
        images: [],
        imgList: [],
        docId: '',
        dataForm: {
          docId: '',
          imageType: '',
          memo: ''
        },
        personId:'',
        currentIndex: 0,
        srcList: [],
        delShow: true,
        showViewer: false,
        disabled: false
      }
    },
    components: {},
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      init(id, docId,customerId,images,checkDate) {
        if(id){
          this.delShow = true
        }else{
          this.delShow = false
        }
        this.checkDate = checkDate
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
        this.imgList = []
        this.personId=customerId||''
        this.dataForm.id = id || ''
        this.dataForm.docId = docId
        remote('doc_type').then(response => {
          this.docTypeOptions = response.data.data
        })
        this.images = images
        this.$nextTick(() => {
          if (this.dataForm.id) {
            this.getImgList()
          }else {
              if(this.personId){
                this.getPersonImgList()
              }
          }
        })
      },
      getImgList() {
        this.imgList = []
        this.srcList = []
        getArgImagelstByDocId(this.dataForm.docId).then(response => {
          if(response.data.code == '0'){
            let dat = response.data;
            this.imgList = response.data.data
            for (let i = 0; i < this.imgList.length; i++) {
              this.imgList[i].src = this.imgList[i].path
              this.srcList.push(this.imgList[i].path)
            }
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      getPersonImgList() {
        this.imgList = []
        this.srcList = []
        getImagesByPerson(this.personId,this.checkDate).then(response => {
          if(response.data.code == '0'){
            let dat = response.data;
            this.imgList = response.data.data
            for (let i = 0; i < this.imgList.length; i++) {
              this.imgList[i].src = this.imgList[i].path
              this.srcList.push(this.imgList[i].path)
            }
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 图片上传之前
      beforeUpload(file){},
      // 图片上传成功
      handleSuccess(res, file) {
        this.$message.success('上传成功')
        this.getImgList()
        this.$nextTick(() => {
          this.$refs.uploadImg.clearFiles()
        })
      },
      // 图片上传失败
      handleError(res, file) {},
      // 删除影像列表
      handlePictureCard(item) {
        if(this.dataForm.id){
          this.$confirm('是否删除影像信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(this.dataForm.id){
              return delPictureByFileName(item.fileName)
            }
          }).then(response => {
            if(response.data.code == '0'){
              this.$message.success('删除成功')
              this.srcList.forEach((src,index) => {
                if(src == item.path){
                  this.srcList.splice(index,1)
                }
              })
              this.getImgList()
            }else{
              this.$message.error(response.data.mdg)
            }
          })
        }
      },
      handlePictureCardPreview(file) {
        if (file) {
          this.srcList.forEach((item,index) => {
            if(item == file.path){
              this.currentIndex = index
            }
          })
        }
        this.showViewer = true
      },
      handleUpload() {},
      openCallback(){},
      closeCallback(){
        this.showViewer = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-col {
    margin-bottom: 0 !important;
  }

  /deep/ .el-upload--picture-card {
    border: none;
  }

  /deep/ .el-upload-dragger {
    width: 150px;
    height: 150px;
    border: none;
    box-sizing: border-box;
  }

  .avue-upload__avatar,
  .avue-upload__icon,
  .el-upload--picture-card,
  .el-upload-list--picture-card .el-upload-list__item {
    line-height: 25px !important;
  }

  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;

    tr th {
      background-color: #f4f5f7;
    }

    tr th,
    tr td {
      padding: 10px 8px;
      border: solid 1px #fff;
      text-align: center;
    }

    .miui-table-header td {
      background-color: #7898a8;
      color: #fff;
    }

    .miui-table-tbody {
      background-color: #cadee8;
    }

    .miui-table-label {
      width: 120px;
      background-color: #b2d5f6;
    }
  }
</style>
